<!DOCTYPE html>
<html lang="zh-CN">

<!-- 页面头部 - 包含元数据和样式表 / Page Header - Metadata & Stylesheets -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/styles1.css">
    <!-- Font Awesome图标库 / Font Awesome Icon Library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="js/script.js"></script>
    <title>Java全栈知识体系导航栏</title>
</head>
<body>
    <!-- 导航栏容器 - 使用Flex布局实现水平排列 / Navbar Container - Using Flex Layout -->
    <nav class="navbar">
        <div class="logo"><a herf="#">java全栈知识体系</a></div>    
       
        <!-- 导航链接区 - 包含主菜单和下拉菜单 / Nav Links Area - Main Menu & Dropdowns -->
        <div class="nav-links">
            <a href="#" class="nav-link">导航</a>
            <a href="#" class="nav-link">面试</a>                 
            <!-- 下拉菜单示例 - 通过CSS绝对定位实现 / Dropdown Example - CSS Absolute Positioning -->
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">Javase</a>
                <div class="dropdown-content">
                    <a href="md.html?info=java/java">java基础</a>
                    <a href="#">对象</a>
                    <a href="#">高级特性</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">数据库</a>
                <div class="dropdown-content">
                    <a href="#">MySQL</a>
                    <a href="#">Redis</a>
                    <a href="#">SQLlite</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">javaweb</a>
                <div class="dropdown-content">
                    <a href="#">前端三剑客</a>
                    <a href="#">javaweb</a>
                    <a href="#">jdbc</a>
                    <a href="#">Git</a>
                    <a href="#">Maven</a>
                    <a href="#">Tomcat</a>
                    <a href="#">Docker</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">框架</a>
                <div class="dropdown-content">
                    <a href="#">SSM</a>
                    <a href="#">MybatisPlus</a>
                    <a href="#">SpringBoot</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">前端</a>
                <div class="dropdown-content">
                    <a href="#">前端三剑客</a>
                    <a href="#">vue3</a>
                    <a href="#">ajax</a>
                    <a href="#">Bootstrap</a>
                    <a href="#">ElementUI</a>
                    <a href="#">Jquer</a>
                    <a href="#">Nod.js</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">springcloud</a>
                <div class="dropdown-content">
                    <a href="#">SpringCloudalibaba</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">微服务</a>
                <div class="dropdown-content">
                    <a href="#">微服务思想</a>
                    <a href="#">分布式架构</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">工具|部署</a>
                <div class="dropdown-content">
                    <a href="#">jenkins</a>
                 
                </div>
            
            </div>
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">云原生</a>
                <div class="dropdown-content">
                    <a href="#">kubernetens</a>
                    <a href="#">kubershere</a>
                </div>
            
            </div>
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle">项目</a>
                <div class="dropdown-content">
                    <a href="#">文档</a>
                    <a href="#">商城</a>
                    <a href="#">游戏</a>
                </div>
            
            </div>
            <a href="#" class="nav-link">文章</a>
            </div>
        <!-- 搜索栏区 - 包含主题切换图标和搜索框 / Search Bar Area - Theme Toggle & Search -->
        <div class="search-bar">
            <!-- 主题切换图标 - 通过JS事件绑定实现 / Theme Toggle Icon - JS Event Binding -->
            <i class="moon-icon fas fa-moon"></i>
            <input type="text" placeholder="搜索">
            <i class="search-icon fas fa-search"></i>
        </div>
    </nav>
    <!-- 主体内容区 - 使用响应式布局 / Main Content Area - Responsive Layout -->
    <div class="bd">
        <img src="resources/img/6.jpg"  title="好好学习" alt="好好学习logo"></img>
        <h1>Java全栈知识体系</h1>
        <h2>色即是空</h2>
        <h2>空即是色</h2>
        <h2>阿弥陀佛</h2>
        <hr width="80%" style="border-color: #666;" >      
    </div>
</body>
</html>